<template>
  <view class="flex py-12 u-border-bottom">
    <u-image width="100rpx" height="100rpx"> </u-image>
    <view class="pl-10">
      <view class="color-primary text-16 mt-4 flex gap-4 items-center">
        <view>远方高定服饰频道</view>
        <view class="flex items-center identity-box">
          <u-icon
            name="checkmark-circle-fill"
            size="28rpx"
            color="#82dd87"
          ></u-icon>
          <view class="text-10 pl-4">总监</view>
        </view>
        <view class="flex items-center level-box">
          <u-icon
            name="checkmark-circle-fill"
            size="28rpx"
            color="#e99f46"
          ></u-icon>
          <view class="text-10 pl-4">40</view>
        </view>
      </view>
      <view>
        <view class="content-box">
          <view class="text-14 pt-4 item-content">
            {{ itemData.content }}
          </view>
        </view>
        <view class="text-14 color-primary pt-12">全文</view>
        <view class="pt-10">
          <u-album :urls="urls2" v-if="true"></u-album>
          <video
            v-else
            class="video"
            src="http://vjs.zencdn.net/v/oceans.mp4"
            id="myVideo"
            @fullscreenchange="fullScreen"
            @ended="endedFun"
          ></video>
        </view>
        <view class="my-10 px-4 py-8 goods-recommend flex items-center">
          <u-image
            width="40rpx"
            height="40rpx"
            src="https://cdn.uviewui.com/uview/album/1.jpg"
          ></u-image>
          <view class="text-12 ellipsis-1 flex-1"
            >【好物推荐】高级商品啊啊啊商品啊啊啊商品啊啊啊</view
          >
          <view>
            <u-icon
              name="arrow-right"
              size="28rpx"
              label="2件商品"
              label-pos="left"
              label-size="12"
              color="#333"
            ></u-icon>
          </view>
        </view>
        <view class="flex justify-between">
          <view class="text-12 color-gray"> 2小时前 </view>
          <view
            class="py-4 px-8 more"
            @click.prevent="showMoreAction = !showMoreAction"
          >
            <view
              :class="{
                'more-action': true,
                'w-250': showMoreAction,
                'w-0': !showMoreAction,
              }"
            >
              <u-icon
                name="download"
                color="#fff"
                size="24rpx"
                label-size="24rpx"
                label-color="#fff"
                label="下载"
                :stop="true"
                @click="down"
              ></u-icon>
              <button open-type="share" class="u-reset-button m-0">
                <u-icon
                  name="share"
                  size="24rpx"
                  color="#fff"
                  label-color="#fff"
                  label="分享"
                  label-size="24rpx"
                ></u-icon>
              </button>
              <u-icon
                name="thumb-up-fill"
                size="24rpx"
                color="#fff"
                label-color="#fff"
                label="点赞"
                label-size="24rpx"
              ></u-icon>
              <u-icon
                name="chat"
                size="24rpx"
                color="#fff"
                label-color="#fff"
                label="评论"
                @click="toComment"
                label-size="24rpx"
              ></u-icon>
            </view>
            <u-icon name="more-dot-fill" size="28rpx"></u-icon
          ></view>
        </view>
      </view>
    </view>
    <view
      v-if="showMoreAction"
      class="mark"
      @click="showMoreAction = false"
    ></view>
  </view>
</template>

<script>
let lastFullscreen = true;
export default {
  props: {
    itemData: {
      type: Object,
    },
  },
  data() {
    return {
      fullTextShow: false,

      urls2: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
        "https://cdn.uviewui.com/uview/album/5.jpg",
        "https://cdn.uviewui.com/uview/album/6.jpg",
        "https://cdn.uviewui.com/uview/album/7.jpg",
        "https://cdn.uviewui.com/uview/album/8.jpg",
        "https://cdn.uviewui.com/uview/album/9.jpg",
        "https://cdn.uviewui.com/uview/album/10.jpg",
      ],
      showMoreAction: false,
    };
  },
  watch: {
    itemData: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.checkContentHeight();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    checkContentHeight() {
      this.$uGetRect(".item-content").then((res) => {
        const height = uni.upx2px("108");
        console.log(height);
        console.log(res.height);
        if (res.height > height) {
          this.fullTextShow = true;
        } else {
          this.fullTextShow = false;
        }
      });
    },

    fullScreen(e) {
      lastFullscreen = false;
      const isFullscreen = e.detail.fullScreen;

      if (isFullscreen) {
        lastFullscreen = true;
        // 状态改变,执行处理逻辑
      } else {
        lastFullscreen = false;
        // #ifdef APP-PLUS
        plus.screen.lockOrientation("portrait-primary");
        // #endif
      }
    },
    endedFun() {
      if (lastFullscreen) {
        this.videoContext.exitFullScreen();
        // #ifdef APP-PLUS
        plus.screen.lockOrientation("portrait-primary");
        // #endif
      }
    },
    down() {
      console.log("下载");
    },
    toComment() {
      this.$emit("toComment");
    },
  },
};
</script>

<style lang="scss" scoped>
.identity-box {
  height: 28rpx;
  background: #e9fdec;
  border-radius: 14rpx;
  padding-right: 14rpx;
}
.level-box {
  height: 28rpx;
  color: #bc6a27;
  border-radius: 14rpx;
  padding-right: 14rpx;
  background: #fbefdc;
}
.content-box {
  max-height: 108rpx;
  overflow: hidden;
  .item-content {
    line-height: 36rpx;
  }
}
.video {
  width: 516rpx;
  height: 300rpx;
  background-color: black;
}
.goods-recommend {
  background: #f5f5f5;
  border-radius: 8rpx;
}
.more {
  background: #f5f5f5;
  border-radius: 8rpx;
  position: relative;
}
.more-action {
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  transition: width 0.3s ease-in-out;
  height: 60rpx;
  border-radius: 8rpx;
  top: -10rpx;
  position: absolute;
  right: calc(100% + 12rpx);
  background: rgba(76, 76, 76, 0.9);
  z-index: 9;
}
.mark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
</style>
